@import "public.scss";

  .title{
    color: #fff;
    font-size: px2rem(18px);
    text-align: center;
    width: 100%;
    height:px2rem(56px);
    line-height: px2rem(56px);
    margin-top: px2rem(-168px);
    font-weight: 700;
  }
  .information{
    width:100%;
    height:px2rem(156px);
    border-radius: 15px;
    background: #fff;
    padding: px2rem(15px);
    margin-top:px2rem(-5px);
    .information-top{
      width:100%;
      height: px2rem(55px);
      border-bottom: 1px dashed #D9D9D9;
      .headportrait{
        width: px2rem(45px);
        height:px2rem(45px);
        border-radius: 100px;
        overflow: hidden;
        img{
          width:100%;
          height:100%;
        }
      }
      .idmessage{
        margin-left: px2rem(15px);
        margin-top:px2rem(12px);
        a{
          font-size: px2rem(15px);
          color: #333;
        }
      }
      .signin{
        width: px2rem(75px);
        height:px2rem(29px);
        border-radius: 16px;
        background: #ffb811;
        font-size: px2rem(12px);
        text-align: center;
        line-height: px2rem(29px);
        color: #fff;
        margin-top: px2rem(8px);
      }
    }
    .information-bottom{
      .balance{
        width:33.33%;
        .number{
          width: 100%;
          text-align: center;
          color: #333;
          height: px2rem(20px);
          font-size: px2rem(16px);
          margin-top: px2rem(8px);
        }
        .text{
          width: 100%;
          font-size: px2rem(11px);
          text-align: center;
          color: #B1B1B2;
          margin-top: px2rem(4px);
          .cashwithdrawal{
            display: inline-block;
            width: px2rem(40px);
            height:px2rem(20px);
            background: #E5463D;
            color: #fff;
            border-radius: 50px;
            line-height: px2rem(20px);
            font-size: px2rem(12px);
          }
        }
      }
      .earningstoday{
        width:33.33%;
        .number{
          width: 100%;
          text-align: center;
          height: px2rem(20px);
          color: #333;
          font-size: px2rem(16px);
          margin-top: px2rem(8px);
        }
        .text{
          width: 100%;
          font-size: px2rem(11px);
          text-align: center;
          color: #B1B1B2;
          line-height: px2rem(20px);
          margin-top: px2rem(4px);

        }
      }
      .accumulatedincome{
        width:33.33%;
        .number{
          width: 100%;
          text-align: center;
          height: px2rem(20px);
          color: #333;
          font-size: px2rem(16px);
          margin-top: px2rem(8px);
        }
        .text{
          width: 100%;
          font-size: px2rem(11px);
          text-align: center;
          color: #B1B1B2;
          line-height: px2rem(20px);
          margin-top: px2rem(4px);
        }
      }
    }
  }
  .tips-wrap{
    width: 100%;
    height:px2rem(30px);
    background: #F4F4F4;
    border-radius: 50px;
    margin-top:px2rem(12px);
    line-height: px2rem(30px);
    text-indent: px2rem(40px);
    font-size: px2rem(14px);
    color: #333;
    position: relative;
    .notice{
      position: absolute;
      width:px2rem(20px);
      height:px2rem(20px);
      left:px2rem(15px);
      top:px2rem(5px);
      img{
        width:100%;
        height:100%;
      }
    }
  }
  .task-wrap{
    margin-top: px2rem(12px);
    width:100%;
    height: px2rem(200px);
    .big-task{
      width:50%;
      height:100%;
      .task-content{
        margin-right:px2rem(5px);
        height: 100%;
        border-radius: 10px;
        background-color: #965efe;
        background-image: url(../images/bg1.png);
        background-size: 100% 80%;
        background-position: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;
        .top{
          font-size: px2rem(19px);
          color: #fff;
          margin-top: px2rem(15px);
          margin-left: px2rem(25px);
        }
        .bot{
          color: hsla(0,0%,100%,.8);
          font-size: px2rem(13px);
          margin-left: px2rem(25px);
          margin-top: px2rem(3px);
        }
      }
    }
    .small-task{
      width:50%;
      padding-left:px2rem(5px);
      .task-top{
        width:100%;
        height: px2rem(95px);
        border-radius: 10px;
        background-size: 60% 100%;
        background-position: 100%;
        background-repeat: no-repeat;
        background-color: #25bcc7;
        background-image: url(../images/bg2.png);
        overflow: hidden;
        .top{
          font-size: px2rem(19px);
          color: #fff;
          margin-top: px2rem(15px);
          margin-left: px2rem(25px);
        }
        .bot{
          color: hsla(0,0%,100%,.8);
          font-size: px2rem(13px);
          margin-left: px2rem(25px);
          margin-top: px2rem(3px);
        }
      }
      .task-bottom{
        width:100%;
        height: px2rem(95px);
        border-radius: 10px;
        margin-top: px2rem(10px);
        background-size: 60% 100%;
        background-position: 100%;
        background-repeat: no-repeat;
        background-color: #355ff8;
        background-image: url(../images/bg3.png);
        overflow: hidden;
        .top{
          font-size: px2rem(19px);
          color: #fff;
          margin-top: px2rem(15px);
          margin-left: px2rem(25px);
        }
        .bot{
          color: hsla(0,0%,100%,.8);
          font-size: px2rem(13px);
          margin-left: px2rem(25px);
          margin-top: px2rem(3px);
        }
      }
    }
  }
  .popular-wrap{
    width:100%;
    margin-top: px2rem(10px);
    .popular-text{
      font-size: px2rem(16px);
      color: #333;
    }
  }
  .banner-wrap{
    width:100%;
    height:px2rem(200px);
    margin-top: px2rem(10px);
    .swiper-container{
      width:100%;
      height:100%;
    }
    img{
      width:100%;
      height:100%;
    }
  }
